<!-- 任务处理结果查看 巡更、巡检 -->
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :before-close="handleCloseBindWarnStandardDetail" :close-on-click-modal="false" title="查看" width="400px" height="300px" class="noMargin task">
      <div class="main">
        <ul class="secondary-list">
          <li><span class="label">事件：</span><span class="value">{{ dialogForm.task_name }}</span></li>
          <li><span class="label">计划名称：</span><span class="value">{{ dialogForm.plan_name }}</span></li>
          <li><span class="label">任务编号：</span><span class="value">{{ dialogForm.task_id }}</span></li>
          <li><span class="label">任务时间：</span><span class="value">{{ dialogForm.task_start_at }}</span></li>
          <li><span class="label">负责人：</span><span class="value">{{ dialogForm.leaderName }}</span></li>
          <li><span class="label">执行人：</span><span class="value">{{ dialogForm.workerName }}</span></li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    dialogForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dialogType: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  created() {
    console.log(this.dialogForm)
  },
  methods: {
    // 关闭弹窗
    handleCancelDetail() {
      this.$emit('getCancel')
    },
    // 关闭弹窗，不可以删这个方法。不用这个方法点击遮罩层关闭会报错
    handleCloseBindWarnStandardDetail() {
      this.$emit('closeBindWarnStandard')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.main{
  &>ul{
    overflow: hidden;
    border-top: 1px solid #D8D8D8;
    padding: 10px 30px;
    li{
      float: left;
      width: 33.3%;
      line-height: 35px;
      .label{
        color: #8F8D8D;
      }
      .value{
        color: #4A4A49;
        img{
          width:100px;
          height: 100px;
          display: inline-block;
        }
      }
    }
  }
  .secondary-list li{
    width: 100%;
  }
  .img-list{
    span{
      float: left;
    }
    ul{
      display: inline-block;
      padding-top:10px;
      li{
        float: left;
        width: 100px;
        margin-right: 10px;
        position: relative;
      }
      li:hover .el-upload-list__item-preview{
        opacity: 1;
      }
      img{
        width: 100px;
        height: 100px;
      }
    }
    .el-upload-list__item-preview{
      position: absolute;
      width: 100px;
      height: 100px;
      line-height: 100px;
      left: 0;
      top: 0;
      cursor:pointer;
      text-align: center;
      color: #fff;
      float:none;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0,0,0,.5);
      -webkit-transition: opacity .3s;
      transition: opacity .3s;
    }
  }
}
</style>
